<template>
	<view class="container">
		<!-- 运费详情 -->
		<u-table>
			<u-tr>
				<u-th>项目</u-th>
				<u-th>数据</u-th>
			</u-tr>
			<u-tr v-for="(item, key) of tableLabel">
				<u-td>{{ item }}</u-td>
				<u-td v-if="moneyKeys.includes(key)">{{ dataSource[key] ? `${dataSource[key] / 1000}元` : '--' }}</u-td>
				<u-td v-else>{{ dataSource[key] || '--' }}</u-td>
			</u-tr>
			<u-tr>
				<u-td>装车榜单</u-td>
				<u-td class="centers">
					<u-image :src="getLoadSrc" @click="getLoadSrc && preview(0)" :lazy-load="true" width="180rpx" height="180rpx">
						<template #error>
							<text class="error">未上传</text>
						</template>
					</u-image>
				</u-td>
			</u-tr>
			<u-tr>
				<u-td>卸车榜单</u-td>
				<u-td class="centers">
					<u-image :src="getUnloadSrc" @click="getUnloadSrc && preview(1)" :lazy-load="true" width="180rpx" height="180rpx">
						<template #error>
							<text class="error">未上传</text>
						</template>
					</u-image>
				</u-td>
			</u-tr>
		</u-table>
	</view>
</template>

<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app';
import { computed, ref } from 'vue';
import { baseFilesVisitURL } from '../../../../common/request';
// 涉及到金额得key
const moneyKeys = ref<any>(['freightAmount', 'freightPrice', 'lossAmount', 'lossPrice']);
// getReportCarInfo
const tableLabel: any = {
	vehicleNo: '车号',
	commodityName: '商品',
	loadingDate: '装车时间',
	unloadDate: '卸车时间',
	loadingAddress: '装车地点',
	unloadAddress: '卸车地点',
	freightPrice: '运费单价',
	loadingTonnage: '实装吨位',
	unloadTonnage: '实卸吨位',
	lossTonnage: '亏损吨位',
	lossSharing: '承担亏吨',
	lossPrice: '亏损单价',
	lossAmount: '亏损金额',
	freightAmount: '已付运费',
	name: '收款人',
	freightPayTime: '付款日期'
};

const removeEmptyFields = (obj: any) => {
	Object.keys(obj).forEach((key) => {
		if (obj[key] === null || obj[key] === undefined || obj[key] === '') {
			delete obj[key];
		}
		// 如果还需要移除0或false
		// if (obj[key] === 0 || obj[key] === false) {
		//   delete obj[key];
		// }
	});
	return obj;
};

// 获取卸车榜单图片
const getUnloadSrc = computed(() => {
	let url: any = '';
	const dep = JSON.parse(dataSource.value.unloadPoundAffix || '[]');
	if (dep.length) {
		url = baseFilesVisitURL + dep[0].path;
	}
	return url;
});

// 获取装车榜单图片
const getLoadSrc = computed(() => {
	let url: any = '';
	const dep = JSON.parse(dataSource.value.loadingPoundAffix || '[]');
	if (dep.length) {
		url = baseFilesVisitURL + dep[0].path;
	}
	return url;
});

// 预览
const preview = (current: number) => {
	uni.previewImage({
		urls: [getLoadSrc.value, getUnloadSrc.value],
		current,
		indicator: 'number'
	});
};

// needDetails
const dataSource = ref<any>({});
onLoad((options) => {
	const D = JSON.parse(decodeURIComponent(options.item));
	const { item } = D.data;
	console.log('item ===> ', item);
	// 移除item中为null的数据
	const mlt = (num: any) => {
		return +num * 1000;
	};
	// 计算亏损吨位 装车减卸车
	const lossTonnage = mlt(item.loadingTonnage) - mlt(item.unloadTonnage);
	item.lossTonnage = lossTonnage / 1000;
	removeEmptyFields(item);
	// 先使用外层，如果内部有数据（例如:单独给某一个司机设置了单价时，就会内部和外层都有数据，这个时候读取外层数据）
	dataSource.value = item;
});
</script>

<style scoped lang="scss">
.container {
	:deep(.u-td) {
		height: auto;
	}

	.centers {
		display: flex;
		justify-content: center;
		align-items: center;

		.error {
			font-size: 26rpx;
		}
	}
}
</style>
